<!-- 全屏 -->
<template>
    <div>
        <!-- 悬浮提示组件 -->
        <el-tooltip placement="bottom-end" :content="iscoapse?'取消全屏':'全屏'">
            <i class="iconfont icon-quanping" @click="changTarget"></i>
        </el-tooltip>
    </div>
</template>

<script lang="ts" setup>
import screenfull from "screenfull";
import "../../assets/font_bqxjm49fz2n/iconfont.css"
import { ref } from "vue";

const iscoapse = ref(false) // 设置一个值为false

const changTarget = () => {
    iscoapse.value = !iscoapse.value
    if (!screenfull.isEnabled) {
        ElMessage.error("您的浏览器不能全屏");
        return false;
    }
    screenfull.toggle();  // 如果当前全屏模式未激活则请求全屏，否则退出全屏。
}
</script>

<style lang="less" scoped>
i {
    font-size: 30px;
    cursor: pointer;
}
</style>